import React, { useEffect, useState } from 'react';
import styles from './classifytest.less';
import { useDispatch, useSelector, QuestionModulState } from 'umi';
import { Modal, Button } from 'antd';
import { Table } from 'antd';

let Classifytest: React.FC = function () {
  const dispatch = useDispatch()
  const { Column } = Table;
  const { getQuestionsTypeList } = useSelector((model: { question: QuestionModulState }) => model.question);
  const [isModalVisible, setIsModalVisible] = useState(false);
  
  const [con,setcon]=useState("")
  useEffect(() => {
    dispatch({
      type: 'question/getQuestionsTypeList'
    })
  }, [])
 
  const showModal = () => {
    setIsModalVisible(true);
  };
  const handleOk = (con:string) => {  //点击确定
    setIsModalVisible(false);
    setcon("")
    let result:any= dispatch({
        type:"question/addinsertQuestionsType",
        payload:{
            text:con,
            sort:getQuestionsTypeList.length+1
        }
     })
     
     result.then((res:any)=>{
      console.log(res,"sfsdfjlfsdflsdjflsd")
          alert(res.msg)
     })
  };
  const handleCancel = () => {  //点击取消
    setIsModalVisible(false);
    setcon("")
  };
  const handlevalue=(e:any)=>{
    setcon(e.target.value)
  }
  return (
    <div className={styles.title}>

      <div className={styles.classifytesthead}>
        <h1>试题分类</h1>
      </div>
      <div className={styles.classifytestmain}>
        <div className={styles.header}>
          <Button type="primary" onClick={showModal}>
            + 添加类型
         </Button>
          <Modal title="创建新类型" visible={isModalVisible} onOk={()=>handleOk(con)} onCancel={handleCancel}>
              <input type="text" style={{ width: '100%', border: 0 }} placeholder="请输入类型名称"  value={con} onChange={handlevalue}/>
          </Modal>
        </div>
        <div className={styles.mainer}>
          <Table dataSource={getQuestionsTypeList}>
            <Column title="类型ID" dataIndex="questions_type_id" key={new Date()+"1"}/>
            <Column title="类型名称" dataIndex="questions_type_text" key={new Date()+"2"}/>
          </Table>,
        </div>
      </div>
    </div>
  );
}
export default Classifytest
